<!DOCTYPE html>
<html>
<head>
<title>Fig 2.75 Recreation</title>
</head>
<body>
<canvas id="canvas" width="500" height="420"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // White background
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // General style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    const origin = { x: 250, y: 220 };

    // Helper function to draw a line with an arrow at the end
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 12; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
    }

    // --- Draw Axes ---
    ctx.lineWidth = 2.5;
    // y-axis
    ctx.beginPath();
    drawArrow(ctx, origin.x, origin.y, 150, 120);
    ctx.stroke();

    // z-axis
    ctx.beginPath();
    drawArrow(ctx, origin.x, origin.y, 420, 220);
    ctx.stroke();

    // -x-axis
    ctx.beginPath();
    ctx.moveTo(origin.x, origin.y);
    ctx.lineTo(150, 320);
    ctx.stroke();

    // --- Labels for axes ---
    ctx.font = 'italic 22px serif';
    ctx.fillText('y', 140, 115);
    ctx.fillText('z', 425, 225);
    ctx.fillText('-x', 140, 335);

    // --- Draw Wires ---
    ctx.lineWidth = 3;
    ctx.beginPath();
    // Wire 1 (left)
    ctx.moveTo(170, 290);
    ctx.lineTo(220, 240);
    // Wire 2 (right)
    ctx.moveTo(255, 205);
    ctx.lineTo(305, 155);
    ctx.stroke();

    // --- Draw Current arrows and labels ---
    ctx.lineWidth = 2;
    // Current 1
    ctx.beginPath();
    drawArrow(ctx, 185, 275, 205, 255);
    ctx.stroke();
    ctx.fillText('I', 170, 250);

    // Current 2
    ctx.beginPath();
    drawArrow(ctx, 270, 190, 290, 170);
    ctx.stroke();
    ctx.fillText('I', 255, 165);

    // --- Draw distance indicator '2a' ---
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    const bracketY = 160;
    const bracketX1 = 200;
    const bracketX2 = 260;
    // Main horizontal line
    ctx.moveTo(bracketX1, bracketY);
    ctx.lineTo(bracketX2, bracketY);
    // Left tick
    ctx.moveTo(bracketX1, bracketY - 8);
    ctx.lineTo(bracketX1, bracketY + 8);
    // Right tick
    ctx.moveTo(bracketX2, bracketY - 8);
    ctx.lineTo(bracketX2, bracketY + 8);
    ctx.stroke();
    ctx.fillText('2a', (bracketX1 + bracketX2) / 2 - 12, bracketY - 5);


    // --- Draw Figure Caption ---
    ctx.font = 'bold 20px sans-serif';
    ctx.fillText('Fig. 2.75', 210, 380);

</script>
</body>
</html>